<template>
  <div class="tableBox">
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="500"
      @selection-change="selectionChange"
      :header-cell-style="{background:'#F1F4F9'}"
    >
      <!-- <el-table-column type="selection" width="50" /> -->
      <template v-for="(item, index) in tableHeader">
        <!-- 插槽：标题文字要特殊显示 | 操作 -->
        <el-table-column
          v-if="item.slot"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :align="item.align || 'center'"
          :show-overflow-tooltip="item.overHidden || false"
          :min-width="item.minWidth || '100px'"
          :sortable="item.sortable || false"
          :type="item.type"
          :width="item.width"
        >
        <template #default="scope">
          <slot :name="item.slot" :row="scope.row"></slot>
        </template>
        </el-table-column>
        <!-- 文字不需要特殊显示 -->
        <el-table-column
          v-else
          :key="index + 1"
          :prop="item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :align="item.align || 'center'"
          :show-overflow-tooltip="item.overHidden || false"
          :min-width="item.minWidth || '100px'"
          :sortable="item.sortable || false"
          :type="item.type"
          :width="item.width"
        >
          <template #default="scope">
            <span>{{ scope.row[item.prop] ? scope.row[item.prop] : "" }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页 -->
    <el-pagination 
      background
      class="pagination"
      small
      :page-sizes="pageSizesArr"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="current"
      :page-size="size"
      :total="total"
      :layout="layout"
    />
  </div>
</template>
    
<script setup lang='ts'>
import { defineProps, defineEmits,ref,toRefs } from "vue";
const emits = defineEmits(["selectionChange", "sizeChange", "currentChange"]);
const current = ref(1);//当前页码
const size = ref(10);//当页显示数量     
const props = defineProps({
  // 表格显示的数据
  tableData: {
    type: Array,
    default:() =>[]
  },
  // 表头数据
  tableHeader: {
    type: Array as any,
    default: function () {
      return [];
    },
  },
  // 总页数
  total: {
    type: Number,
    // 类型
    required: true,
    default: 0,
  },
  // 分页的页容量数组
  pageSizesArr: {
    type: Array,
    default() {
      return [10, 20, 30, 50];
    },
  },
  // 分页的布局
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
});

const {tableData,tableHeader,total,pageSizesArr,layout} = toRefs(props)
//表格事件
const selectionChange = (val: any) => {
  emits("selectionChange", val);
};
 
// 页数改变的时候触发的事件
const sizeChange = (val: any) => {
  size.value = val;
  emits("sizeChange", val);
};
// 当前页改变的时候触发的事件
const currentChange = (val: any) => {
  current.value = val;
  emits("currentChange", val);
};
</script>
    
<style lang="scss" scoped>
.tableBox {
  margin-top: 1rem;
}
.pagination {
  float: right;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
</style>